<html>

<head>
    <script>
        function draw() {
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');

            // Draw slice
            ctx.drawImage(document.getElementById('source'),
                33, 71, 104, 124, 21, 20, 87, 104);

            // Draw frame
            ctx.drawImage(document.getElementById('frame'), 0, 0);
        }
    </script>
</head>

<body onload="draw();">
    <canvas id="canvas" width="150" height="150"></canvas>
    <div style="display:none;">
        <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
        <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
    </div>
</body>

</html>